<template>
    <div>
        <div class="title">
            <Row type="flex" justify="space-between" class="code-row-bg">
                <Col span="17"><span class="option-title">{{option.title}}</span></Col>
                <Col span="2">
                    <Icon class="icon" type="md-arrow-round-forward" @click="result(option.id)"/>
                </Col>
            </Row>
        </div>
        <div class="dsc" v-show="isShow">
            <div class="dsc-option">{{option.dsc}}</div>
            <div class="dsc-little">{{option.little}}</div>
        </div>
        <div class="list" v-for="(item,index) in list" :key="index">
            <Row type="flex" justify="space-between" class="code-row-bg">
                <Col span="20"><span class="content">{{item.article_name}}</span></Col>
                <Col span="3"><span class="datatime">{{filtiationDate(item.release_time)}}</span></Col>
            </Row>
        </div>
    </div>
</template>

<script>
export default {
  name: 'SiteContentList',
  props: {
    option: {
      type: Object,
      default: () => {
        return {
          title: '',
          dsc: '',
          little: ''
        }
      }
    },
    isShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    list: {
      type: Array,
      default: () => {
        return {
          list: []
        }
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    filtiationDate (data) {
      return this.$common.xeUtils.toDateString(data, 'yyyy-M-d')
    },
    result (id) {
      console.log(id, '子组件中id')
      this.$emit('result', id)
    }
  }
}
</script>

<style scoped lang="less">
    .title {
        border-top: 3px #0166b6 solid;
        font-weight: bolder;
        height: 50px;
        background-color: #ebebeb;
        font-size: 20px;
        line-height: 50px;
        color: #0166b6;
    }

    .list {
        height: 50px;
        border-bottom: 1px #c3c3c3 dashed;
        line-height: 50px;
        font-size: 16px;
    }

    .dsc {
        height: 100px;
        border-bottom: 1px #c3c3c3 dashed;

        &-option {
            font-size: 20px;
            color: #e84c3d;
            margin-left: 10px;
            font-weight: bolder;
            margin-top: 5px;
        }

        &-little {
            font-size: 15px;
            margin-left: 10px;
            width: 670px;
            margin-top: 5px;
            line-height: 30px;
            text-indent: 25px;
            color: black;
        }
    }

    .datatime {
        color: black;
    }

    .content {
        color: #898989;
        margin-left: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .option-title {
        margin-left: 10px;
    }
    .icon{
        cursor:pointer
    }
</style>
